<template>
  <div class="note">


        <div style="text-align: center;" >
          <img :src="imgUrl">
        </div>


    <div style="text-align: center;" class="gao">
      <el-radio-group v-model="consName" @change="agreeChange">
        <el-radio-button border label="白羊座" size="medium" witdh=10rpx></el-radio-button>
        <el-radio-button border label="金牛座" size="medium"></el-radio-button>
        <el-radio-button border label="双子座" size="medium"></el-radio-button>
        <el-radio-button border label="巨蟹座" size="medium"></el-radio-button>
        <el-radio-button border label="狮子座" size="medium"></el-radio-button>
        <el-radio-button border label="处女座" size="medium"></el-radio-button>
        <el-radio-button border label="天秤座" size="medium"></el-radio-button>
        <el-radio-button border label="天蝎座" size="medium"></el-radio-button>
        <el-radio-button border label="射手座" size="medium"></el-radio-button>
        <el-radio-button border label="摩羯座" size="medium"></el-radio-button>
        <el-radio-button border label="水瓶座" size="medium"></el-radio-button>
        <el-radio-button border label="双鱼座" size="medium"></el-radio-button>
      </el-radio-group>
    </div>

  <div style="text-align: center;" class="di" >
    <el-radio-group v-model="type" @change="agreeChange">
      <el-radio label="today">今日运势</el-radio>
      <el-radio label="tomorrow">明日运势</el-radio>
      <!-- <el-radio label="week">本周运势</el-radio>
      <el-radio label="month">本月运势</el-radio> -->
    </el-radio-group>
  </div>

    <div style="text-align: center;">
      <el-button @click="loadXz()">测试</el-button>
    </div>


      <div class="data">
      你的健康指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(xzs.health)"></el-progress>
      你的爱情指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(xzs.love)" ></el-progress>
      你的金钱指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(xzs.money)" ></el-progress>
      你的学习指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(xzs.work)" ></el-progress>
      </div>

      <div class="text">
        <el-alert
          :closable="false"
          title="运势详解"
          type="success"
          effect="dark"
          center
          >{{xzs.summary}}
        </el-alert>

      </div>




  </div>






</template>

<script>
import axios from 'axios'
export default {
  
  data(){
    return{
      type:"",
      consName:"",
      imgUrl:require("@/icons/xingzuo.jpg"),
      xzs: {
        health:0,
        love:0,
        work:0,
        money:0,
      },

//       note: {
//         backgroundImage:'url(' + require('@/icons/bg.jpg') + ')',
//         backgroundSize: "3000px auto",
//         marginTop: "5px",
//     }
    }
  },

  methods:{
    agreeChange(val){
    },

    loadXz(){
      // 定义变量，请求地址
      let url = "/api/constellation/getAll"
      // 请求参数
      let param = {
        consName:this.consName,
        type:this.type,
        key:"ca15e4fa0b5d567e6d0a2d70066d14c7"
      }
      axios.get(url, { params: param }).then(resp => {
        this.xzs = resp.data
      })
    },
    
  },
  
  
}
</script>

  

<style scoped>

.gao{
  height: 100px;
  
}

.di{
  height: 50px;
}

.data{
  height: 220px;
  width: 600px;
  margin: auto;
}

.text{
  text-align: center;
  margin: auto;
  width: 600px;
}

 
</style>